﻿@model dynamic

@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Track the UFO</h2>

<div id="map_canvas" style="width:500px; height:500px;"></div>


@section scripts
{
    <script type="text/javascript">
        $(document).ready(function() {
            var theChoock;

            function initialize() {
                var canv = document.getElementById('map_canvas');
                var myLatLng = new google.maps.LatLng(-27.480582, 153.135337);
                var mapOptions = {
                    zoom: 20,
                    center: myLatLng,
                    mapTypeId: google.maps.MapTypeId.SATELLITE
                };
                var map = new google.maps.Map(canv,
                    mapOptions);

                var image = "@Url.Content("~/Images/ufo.png")";
                var beachMarker = new google.maps.Marker({
                    position: myLatLng,
                    icon: image,
                    title: "The UFO"
                });
                beachMarker.setMap(map);
                theChoock = beachMarker;
                var contentString = '<div id="marker_data"> <P>Power:<br/> <span id="ufo_power"></span><br/>Radio Signal Power<br/> <span id ="ufo_radio"></span></p> </div>';
                var infowindow = new google.maps.InfoWindow({ content: contentString });
                google.maps.event.addListener(beachMarker, 'click', function() {
                    infowindow.open(map, beachMarker);
                });
                theChoock.currentLat = theChoock.position.lat();
                theChoock.currentLong = theChoock.position.lng();
                theChoock.currentZoom = mapOptions.zoom;
                setInterval(function() { moveHer(); }, 100);
            }

            function moveHer() {
                theChoock.setPosition(new google.maps.LatLng(
                    theChoock.currentLat, theChoock.currentLong
                ));
                if (!theChoock.nextPanScheduled) {
                    theChoock.nextPanScheduled = true;
                    setTimeout(function() {
                        theChoock.map.panTo(theChoock.position);
                        theChoock.nextPanScheduled = false;
                    }, 5000);
                }
            }

            initialize();

            $.connection.hub.logging = true;
            var hub = $.connection.broadcastHub;

            function connectionReady() {
                console.log("connected to SingalR");
            }

            hub.client.updateDouble = function(tagId, times, value) {
                if (tagId === '@ViewBag.Ufo_latId') {
                    theChoock.currentLat = value;
                    moveHer();
                }
                if (tagId === '@ViewBag.Ufo_lngId') {
                    theChoock.currentLong = value;
                    moveHer();
                }
                if (tagId === '@ViewBag.Ufo_power') {
                    $("#ufo_power").text(value.toFixed(2));
                }
                if (tagId === '@ViewBag.Ufo_signalRecievedPower') {
                    $("#ufo_radio").text(value.toFixed(2));
                }
            };

            $.connection.hub.error(function() {
                alert("Error connecting to the server");
            });

            $.connection.hub.start()
                .done(connectionReady)
                .fail(function() { console.log("Could not Connect!"); });
        });
    </script>
}

